<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			div#box{
				background-color: #ddd;
			}
			table#tab{
				border: 1px solid gray;
				border-collapse: collapse;
				width: 1000px;
				margin: auto;
				text-align: left;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td {
				border: 1px solid gray;
			}
			table#tab tr td a{
				cursor: pointer;
			}
			
			.edit{
				color: #0000FF;
			}
			
			.delete {
				color: #FF0000;
			}
			
			div#goods{
				display: flex;
				width: 1000px;
				margin: auto;
			}
			
			div#goods div.goodsBox{
				width: 240px;
				height: 240px;
				background-color: #fff;
				margin: 10px;
				text-align: center;
			}
			
			div#goods div.goodsBox img{
				width: 150px;
				height: 150px;
			}
			
			.addShopCar{
				display: none;
			}
			
			.goodsBox:hover .ratings{
				display: none;
			}
			.goodsBox:hover .addShopCar{
				display: inline-block;
			}
			.addShopCar button{
				border: 0px;
			}
			.goodsBox:hover .addShopCar button{
				background-color: #f90;
				color: #fff;
				width: 100px;
				height: 35px;
			}
			
			.goodsName{
				width: 80%;
				overflow:hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: auto;
			}	
		</style>
	</head>
	<body>
		<div id="box">
			<div class="header">
				<table id="tab" >
					<thead>
						<tr>
							<th>
								<label >
									<input type="checkbox" id="checkAll" onclick="fn34(that)"/>全选
								</label>
							</th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量 </th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						
						<!--<tr>
							<td>
								<input type="checkbox" />
							</td>
							<td>RedMi K20系列 环境之心保护壳 紫色</td>
							<td>39元</td>
							<td>
								<button type="button">-</button>
								<input type="number" value="1"/>
								<button type="button">+</button>
							</td>
							<td>39元</td>
							<td>
								<a class="delete">删除</a>
							</td>
						</tr>
						-->
					</tbody>
					
				</table>
			</div>
			
			<div id="goods">
		
				<!--<div class="goodsBox">
					<div>
						<img src="../../../y2001A2/和媛媛课堂P2/day12/素材/ErJi.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>-->
				<!--<div class="goodsBox">
					<div>
						<img src="../../../y2001A2/和媛媛课堂P2/day12/素材/ErJi.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>-->
				<!--<div class="goodsBox">
					<div>
						<img src="../../../y2001A2/和媛媛课堂P2/day12/素材/ErJi.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>-->
				<!--<div class="goodsBox">
					<div>
						<img src="../../../y2001A2/和媛媛课堂P2/day12/素材/ErJi.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>-->
				<!--<div class="goodsBox">
					<div>
						<img src="../../../y2001A2/和媛媛课堂P2/day12/素材/ErJi.png"  />
						<div>
							RedMi AirDots
						</div>
						<div>
							99.9元
						</div>
						<div class="ratings">
							4.3万人好评
						</div>
						<div class="addShopCar">
							<button type="button" >加入购物车</button>
						</div>
					</div>
				</div>-->
				
			</div>
		<script src="02.js"></script>
		<script>
			/**
			 1.查询数据,根据数据设计页面,设计样式
			 2.找到要操作的dom,并清空,再创建空字符串str
			 3.遍历数据,将str+=要添加的数据
			 4.分析哪些字段是动态数据和静态数据
			 5.绑定数据,若用到了函数,且传递的参数是对象,要使用JSON.stringify包括对象
			 * **/
			console.log("arr:",arr);
			var tbody= document.getElementById("tbody");
			tbody.innerHTML="";
			var trs="";
			
			var goods= document.getElementById("goods");
			goods.innerHTML="";
			var divs=""
			
			
			for(var i=0;i<arr.length;i++){
				trs+=`
					<tr>
						<td>
							<input type="checkbox"/>
						</td>
						<td>
							${arr[i].goodsName}
						</td>
						<td>
							${arr[i].price}元
						</td>
						<td>
							<button type="button">-</button>
							<input type="number" value=1 />
							<button type="button">+</button>
						</td>
						<td>
							39元
						</td>
						<td>
							 <a class="delete">  X </a>
						</td>
					</tr>
				`;
				//1
				divs+=`
					<div class="goodsBox">
						<div>
							<img src=${arr[i].img} class="img" />
						</div>
						<div class="goodsName">
							${arr[i].goodsName}
						</div>
						<div>
							${arr[i].price}元
						</div>
						<div class="ratings">
							${arr[i].goodsRatings}
						</div>
						<div class="addShopCar">
							<button type="button" >加入购物车</button>
						</div>
					</div>
				`
			}
			//console.log("trs:",trs);
			tbody.innerHTML=trs;
			goods.innerHTML=divs;
			
//			 //是否需要选中  全选/全不选
//			   function fn36(){
//				   var checkAll=document.getElementById("checkAll");
//				   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
//				   var f=true;
//				   
//				   for(var i=0;i<ipts.length;i++){
//					   if(!ipts[i].checked){
//						   f=false;
//						   break;
//					   }
//				   }
//					checkAll.checked=f;
//			   }
//			   
//			   //反选
//			   function fn35(){
//				   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
//				   for(var i=0;i<ipts.length;i++){
//						
//						ipts[i].checked = !ipts[i].checked;// !取反
//						
//				   }
//				   
//				   fn36();//判断是否选中 全选/全不选
//			   }
//			
			//全选/全不选
			   function fn34(that){
				   //console.log("全选/全不选",that,"我自己是否被选中",that.checked);
				   
				   var f=that.checked;//全选/全不选 的选中状态
				   
				   var ipts=document.querySelectorAll("div#tab input[type='checkbox']");
				   for(var i=0;i<ipts.length;i++){
					   ipts[i].checked=f;
				   }
				   
			   }
		</script>
	</body>
</html>
